<template>
	<div>
		<head-top></head-top>
		<div class="col-sm-12 boxWrap help_document_box">
			<div class="help_document">
				<div class="col-sm-12" style="padding:30px;background:#fff;position:relative;">
					<p class="help_document_title text-left">
						<img src="../assets/img/help.svg" alt="img" style="width:120px;height:34px;"/>
						使用教程
					</p>
					<div class="help_document_con text-left">
						<p class="help_browse"><strong>目录浏览</strong></p>
						<p class="help_catalog_list">
							<a href="javascript:void(0)" @click="goData('#data')">数据上传</a>
						</p>						
						<p class="help_catalog_list">							
							<a href="javascript:void(0)" @click="goDataBasicAnalysis('#basic_analysis')">数据基本分析</a>
						</p>
						<p class="help_catalog_list">							
							<a href="javascript:void(0)" @click="goSmart('#smart')">智能建模</a>
						</p>
						<p class="help_catalog_list">						
							<a href="javascript:void(0)" @click="goManual('#manual')">手动建模</a>
						</p>
						<p class="help_catalog_list spe_help_catalog_list">							
							<a href="javascript:void(0)" @click="goDataPredict('#data_predict')">数据预测</a>
						</p>
						<div class="help_catalog_item_con col-sm-12">
							<p class="help_catalog_item_con_title">资源库：</p>
							<p>建模和分析的基础来源于数据。对于刚刚来到AtomPai的用户，我们准备了一系列的测试数据一遍快速上手，
								体验AtomPai智能建模和数据分析的便利。</p>
							<p>用户登陆后，通过资源库。选择数据列表中的数据，即可进入该数据的详情页。在页面的左侧
								，可以进行AtomPai数据分析的四个主要功能：智能建模、数据基本分析、
								手动建模、数据预测。当用户已经熟悉AtomPai的基本操作以后，可以通过数据上传来对自己的数据进行建模和分析。</p>
							<hr />	
							<p class="help_catalog_item_con_title"  id="data">数据上传：</p>
							<p>在利用AtomPai进行数据分析与建模之前，第一步则需要上传相关的数据。用户登陆AtomPai之后会自动跳到工作台页面，
								用户可通过点击首页右上方“创建”->“上传数据”；或直接点击首页上侧“上传数据”来进行数据上传：</p>
							<p class="text-left"><img src="../assets/img/help_1.png" alt="img" style="height:60px;"/></p>
							<p>上传数据</p>
							<p>在“上传数据”页面，可直接通过拖拽的方式将所需数据拖拽到制定窗口后进行编辑，
								或点击“浏览”->选择用户要上传的数据->对数据进行编辑->“确定上传”：</p>
							<p class="text-left"><img src="../assets/img/help_2.png" alt="img" style="height:550px;"/></p>
							<p>数据信息</p>
							<p>目前AtomPai暂时仅支持Excel，csv (comma separated values), 和tsv (tab separated values) 格式的数据文件。
								单个数据文件大小限制为 10MB。若需要更大的数据上传权限，
								请联系我们。在上传过程中，用户需填写“数据名称”、“数据描述”；
								“隐私性“于AtomPai现版本默认为“私有”；“包含标题”与否代表上传的数据的第一行为变量名标题或数据，如不勾选，
								AtomPai则会给变量自动命名0, 1, 2 … N。</p>
							<p>数据上传成功后，用户会自动跳转到上传的数据的详情页面，
								同时也可以点击主页面上方“工作台”-> 选择上传的数据，进入此页面，如图所示：</p>
							<p class="text-left"><img src="../assets/img/help_3.png" alt="img" style="height:600px;"/></p>
							<p>数据详情</p>
							<p>数据详情页面上方展示了数据的行列数；下方则是每个变量的类型，包含连续数值型与离散分类型
								（用户可点击“显示类型”旁的修改图标，来修改相应变量的类型）；左侧为AtomPai数据分析
								的四个主要功能：智能建模、数据基本分析、手动建模、数据预测。</p>
							<hr />	
							<p class="help_catalog_item_con_title" id="basic_analysis">数据基本分析：</p>
							<p>	上传数据之后，AtomPai会自动跳转到该数据的详情页面，在此页面用户可对数据进行基本分析。
								点击页面左侧“数据基本分析”，或在主页通过点击“工作台”->数据详情页面->左侧“数据基本分析”
								的方式来查看数据基本信息报告。该报告包含数据每个变量的特征与可视化结果：</p>
							<p class="text-left"><img src="../assets/img/help_4.png" alt="img" style="height:300px;"/></p>
							<p>数据详情包含了每个特征变量的缺失值、最小值、四分位数等基本特征</p>
							<p class="text-left"><img src="../assets/img/help_5.png" alt="img" style="height:230px;"/></p>
							<p>数据预览则为数据详情的基本展示，用户可看到完整的数据</p>
							<p>“数据基本分析”功能同时还会展示数据的直方图与散点图，实现基础的数据可视化（更多扩展的可视化功能正在开发中），
								用户可在图型的上侧和下侧选择需要展示的变量：</p>
							<p class="text-left"><img src="../assets/img/help_6.png" alt="img" style="height:500px;"/></p>
							<p>直方图用于展示连续变量的数据分布，便于之后对数据进行预处理和选择模型</p>
							<p class="text-left"><img src="../assets/img/help_7.png" alt="img" style="height:600px;"/></p>
							<p>散点图体现被选择的两两变量之间的相关关系以及相互之间的分布情况</p>
							<hr />
							<p class="help_catalog_item_con_title" id="smart">智能建模：</p>
							<p>用户通过“数据基本分析”对于数据的类型和基本统计信息都有一定了解后，下一步则可以开始模型搭建。
								AtomPai的“智能建模”功能根据用户选择使用的数据，在后台自动帮助用户搭建模型，
								最后推荐出预测能力排名靠前的模型 。整个过程完全高效、自动化，不需用户有任何建模的专业知识，
								即可完成复杂的建模工作。</p>
							<p>在进行建模之前，用户可以在数据详情页面确认一遍模型准备使用的变量类型是否正确，如需修改，
								可点击“显示类型”旁边的修改按钮进行修改：</p>
							<p class="text-left"><img src="../assets/img/help_8.png" alt="img" style="height:400px;"/></p>
							<p>模型变量类型</p>
							<p>确认无误后，回到数据详情页面->点击左上侧“智能建模”，进入“智能模型”搭建页面：</p>
							<p class="text-left"><img src="../assets/img/help_9.png" alt="img" style="height:500px;"/></p>
							<p>变量选择</p>
							<p>已选标签为用户需要预测的因变量，已选特征为被选择的自变量，按照用户需求进行相应的变量选择后，
								点击“开始建模”。AtomPai在后台自动运行相关模型并进行排序后，自动产生模型报告：</p>
							<p class="text-left"><img src="../assets/img/help_10.png" alt="img" style="height:300px;"/></p>
							<p>模型报告</p>
							<p>AtomPai在报告中推荐出表现靠前的模型。用户可以根据自己需要保存相应的模型，并用于后续的数据预测。
								“智能建模”为自动化模型搭建，若用户希望自己选择模型、模板，或是对模型条件、参数等有更改需求，
								则可以选择“手动建模”功能进行模型搭建。</p>
							<hr />
							<p class="help_catalog_item_con_title" id="manual">手动建模：</p>
							<p>在“手动建模”模块，用户对于模型选择和模型搭建都有更多的自由选择空间，同时能更深入的进行“监督学习”，
								在数据详情页面点击左侧“手动建模”，便可进入手动建模页面：</p>
							<p class="text-left"><img src="../assets/img/help_11.png" alt="img" style="height:300px;"/></p>
							<p>手动建模</p>
							<p>数据源会默认为目前选择的数据，如果用户有需求可重新选择。点击右侧“选择模型”进入到模型选择页面：</p>
							<p class="text-left"><img src="../assets/img/help_12.png" alt="img" style="height:500px;"/></p>
							<p>模型选择</p>
							<p>模型选择的页面中包括AtomPai官方提供的模型，同时未来还将支持用户自己创建模型、或是使用其他用户分享的模型。
								选择与数据特性相对应的模型后，点击“确定”回到模型搭建页面。</p>
							<p>在模型搭建页面选择需要用于建模的变量，选择缺失值处理方式（默认为删除包含缺失值的数据行）
								和指定使用全部或部分数据来进行建模，待一切选择完成后点击“提交计算任务”，等待AtomPai运行模型。</p>
							<p class="text-left"><img src="../assets/img/help_13.png" alt="img" style="height:350px;"/></p>
							<p>手动建模模型</p>
							<p>“手动建模”生成报告如下，报告会提供预测的评估指标和可视化结果，根据模型的功能(分类、聚类、回归)
								会有不同的报告模板。</p>
							<p class="text-left"><img src="../assets/img/help_14.png" alt="img" style="height:600px;"/></p>
							<p>手动建模报告示例-分类</p>
							<hr />
							<p class="help_catalog_item_con_title" id="data_predict">数据预测</p>
							<p>机器学习模型的根本目的是为了预测未知的新数据,“数据预测”模块就提供了这一功能,
								用户可以从“工作台”->数据详情页面->左侧“数据预测”进入预测模块。根据已有的数据,
								选择合适的模型(此处以上文中的手动建模的模型为例)。
								同样,拖拽选择正确的数据特征(注意！预测时数据的特征和训练时的应当保持一致)。</p>
							<p class="text-left"><img src="../assets/img/help_15.png" alt="img" style="height:400px;"/></p>
							<p>点击开始提交任务，一杯咖啡的功夫，预测任务就完成了，并生成如下的报告：</p>
							<p class="text-left"><img src="../assets/img/help_16.png" alt="img" style="height:600px;"/></p>
							<p>预测报告会提供预测的评估指标和可视化结果，根据模型的功能(分类、聚类、回归)会有不同的报告模板。</p>
							<p>若有任何疑问，请发邮件到 service@AtomPai.com。若有模型定制需求或商务合作意向，欢迎点击页面上方“商务合作”。
								我们会有专业人员第一时间与您取得联系。</p>
						</div>
					</div>					
					<p class="go_top" @click="goTop()">
						<img src="../assets/img/go_top.svg" alt="img" />
					</p>
				</div>
			</div>
		</div>
		<footerHtml></footerHtml>
	</div>
</template>

<script>
	import headTop from '@/components/headTop'
	import footerHtml from '@/components/footerHtml'
	
	export default {
	    name: 'helpDocument',   
	    data(){
	    	return {

	    	}
	    },
	    components:{
	    	headTop,
	    	footerHtml
	    }, 
	    methods:{
	    	goTop(){
	    		document.body.scrollTop = 0
				document.documentElement.scrollTop = 0
	    	},
	    	goData(selector) {
		        let anchor = this.$el.querySelector(selector);
		        document.body.scrollTop = anchor.offsetTop; // chrome
		        document.documentElement.scrollTop = anchor.offsetTop; // firefox
		 	},
		 	goDataBasicAnalysis(selector) {
		        let anchor = this.$el.querySelector(selector);
		        document.body.scrollTop = anchor.offsetTop; // chrome
		        document.documentElement.scrollTop = anchor.offsetTop; // firefox
		 	},
		 	goSmart(selector) {
		        let anchor = this.$el.querySelector(selector);
		        document.body.scrollTop=anchor.offsetTop; // chrome
		        document.documentElement.scrollTop = anchor.offsetTop; // firefox
		 	},
		 	goManual(selector) {
		        let anchor = this.$el.querySelector(selector);
		        document.body.scrollTop = anchor.offsetTop; // chrome
		        document.documentElement.scrollTop = anchor.offsetTop; // firefox
		 	},
		 	goDataPredict(selector) {
		        let anchor = this.$el.querySelector(selector);
		        document.body.scrollTop = anchor.offsetTop; // chrome
		        document.documentElement.scrollTop = anchor.offsetTop; // firefox
		 	},
		 	
	    }
	}
	
</script>

<style lang="css">
	@import "../assets/css/help_document.css"
</style>